<template>
		<view>
			
			<nav-bar title="" >
				<view slot="left"  class="icon " @click="toIndex">&#60411;</view>
				<view slot="right" class="address_select" @click="clickRight">{{city}}</view>
			</nav-bar>
			
			<pickerAddress v-model="addressShow" @confirm="addresspick" >{{addressShow}}</pickerAddress>
			
			<view class="uni-padding-wrap">
				<view class="page-section swiper">
					<view class="page-section-spacing">
						<swiper class="swiper" indicator-color="#999999" indicator-active-color="white" :indicator-dots="indicatorDots"
						 :autoplay="autoplay" :interval="interval" :duration="duration" circular="true">
							<swiper-item>
								<view class="swiper-item uni-bg-red" >
									<image src="http://www.joyrv.cn//Public/Uploads/shop/adv/05893723166610878.jpg"></image>
								</view>
							</swiper-item>
							<swiper-item>
								<view class="swiper-item uni-bg-green">
									<image src="http://www.joyrv.cn//Public/Uploads/shop/adv/05914680063368267.jpg"></image>
								</view>
							</swiper-item>
							<swiper-item>
								<view class="swiper-item uni-bg-blue">
									<image src="http://www.joyrv.cn//Public/Uploads/shop/adv/05893723047615385.jpg"></image>
								</view>
							</swiper-item>
						</swiper>
					</view>
				</view>
			</view>
			
			<view class="test header_float">
				<view @tap="selectCamp">&#59250;营地</view>
				<view @tap="typeActivity">&#59250;分类</view>
				<view @tap="priceList">&#59250;排序</view>
			</view>
			
			<view class="example-info" v-if="showExample">
				<view  v-for="(list,index) in examlpleList"   @tap='doAction(examlpleList[0].text,index)' >{{list.text}}</view>
			</view>
				
			<view id="moments" v-if="showActivityList.length">
				<view class="home-pic" v-for="(list,index) in showActivityList"  @tap = "toActivityInfo(list.actId)">
					
				</view>
			</view>
		<!-- <view class="uni-loadmore" v-if="showLoadMore">{{loadMoreText}}</view> -->
	</view>
</template>

<script>
	//三级联动地址
	import pickerAddress from '@/components/liudx-pickerAddress/index.vue'
	export default {
		components:{
			pickerAddress
		},
		
		data() {
			return {
				priceLists:[{
					id:0,
					text:'排序'
				},{
					id:1,
					text:"降序"
				},{
					id:2,
					text:"升序"
				}],
				
				typeLists:[],
				campList:[],
				examlpleList:[],
				activityList:[],
				showActivityList:[],
				
				showExample:false,
				
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				
				city:'',
				loadMoreText:'触底了',
				showLoadMore:true,
				addressShow : false
			}
		},
		mounted() {
			
		},
		onLoad(options,obj) {
			
			console.log(uni.getStorageSync("user"));
			
			this.city = options.address;
			uni.getSystemInfo({ //获取设备信息
				success: (res) => {
					this.screenHeight = res.screenHeight;
					this.platform = res.platform;
				}
			});
			uni.startPullDownRefresh();
		},
		
		onReachBottom() { //监听上拉触底事件
			console.log('onReachBottom');
			this.showLoadMore = true;
		},
		onPullDownRefresh() { //监听下拉刷新动作
			console.log('onPullDownRefresh');
			// 这里获取数据
			setTimeout(function() {
				//初始化数据
				uni.stopPullDownRefresh(); //停止下拉刷新
			}, 1000);
		},
		// onNavigationBarButtonTap(e) {//监听标题栏点击事件
		// 	if(e.index == 0 ){
		// 		var href=location.href;
				
		// 		console.log(city);
		// 		var page=this.$mp.page;
		// 		console.log(page);
		// 		var pages = getCurrentPages();  
		// 		var page = pages[pages.length - 1]; 
		// 		console.log(page);
		// 		this.$mp.page.$getAppWebview();
				
		// 	}
		// },
		computed:{
			
		},
		methods: {
			
			clickLeft(){
				uni.navigateBack({//可根据实际情况使用其他路由方式
					delta:1
				});
			},
			toIndex(){
				uni.switchTab({
					url:"/pages/index/index"
				})
			},
			clickRight(){
				this.addressShow = true;
			},
			addresspick(obj) {
				console.log(obj);
				// let arr = [ 'province', 'city', 'area'];
				// let place = '';
				// let i =1;
				// arr.map(key => {
					var city=obj['province'].AreaName;
					// this.form[key] = obj[key].AreaId
				// 	if(i==1){
				// 		this.city = obj[key].AreaName;
				// 		i=2;
				// 	}
				// 	place += obj[key].AreaName
				// })
				// this.address = place;
				if(city.indexOf("省") != -1){
					this.city = city.substring(0,city.indexOf("省"));
				}else if(city.length > 3 && city.indexOf("自治区") != -1){
					this.city = city.substring(0,city.indexOf("自治区"));
				}else{
					this.city = city;
				}
				console.log(this.city);
			},
			selectCamp(){
				if(this.examlpleList[0] != this.campList[0]){
					this.examlpleList = this.campList;
					this.showExample = true;
				}else{
					this.showExample = false;
					this.examlpleList = [];
				}
				
			},
			typeActivity(){
				if(this.examlpleList[0] != this.typeLists[0]){
					this.examlpleList = this.typeLists;
					this.showExample = true;
				}else{
					this.showExample = false;
					this.examlpleList = [];
				}
				
			},
			priceList(){
				if(this.examlpleList[0] != this.priceLists[0]){
					this.examlpleList = this.priceLists;
					this.showExample = true;
				}else{
					this.showExample = false;
					this.examlpleList = [];
				}
			},
			toActivityInfo(obj){
				uni.navigateTo({
					url:'test?actId='+obj
				})
			}
			,
			doAction(str,index){
				this.showExample = false;
				this.examlpleList = [];
				var _this = this;
				console.log(str);
				console.log(index);
				if(index == 0){
					this.showActivityList = this.activityList;
					return;
				}else if(str == '排序'){
					if(index == 1){
						this.showActivityList.sort(function(b,a) {return a.price - b.price});
					}else{
						this.showActivityList.sort(function(a,b) {return a.price - b.price});
					}
					
				}else if(str == '营地'){
					var id = this.typeLists[index].id;
					this.showActivityList = []
					for(var i = 0 ;i < this.activityList.length ; i ++){
						if(this.activityList[i].campId == id){
							this.showActivityList.push(this.activityList[i]);
						}
					}
					
				}else if(str == '分类'){
					var id=this.typeLists[index].id;
					this.showActivityList = []
					for(var i = 0 ;i < this.activityList.length ; i ++){
						if(this.activityList[i].atypeId == id){
							this.showActivityList.push(this.activityList[i]);
						}
					}
				}
			},
			searchActivity(msg){
				console.log(msg.value);
			},
			selectExampleList(){
				var _this = this;
				uni.request({
					url:_this.webUrl + "activity/campList",
					data:{city:_this.city},
					method:'GET',
					success:res => {
						_this.campList.push({
							id:0,text:"营地"
						});
						_this.typeLists.push({
							id:0,text:"分类"
						});
						if(_this.campList.length == 1)
							_this.campList=_this.campList.concat(res.data.list[0]);
						if(_this.typeLists.length == 1)
							_this.typeLists=_this.typeLists.concat(res.data.list[1]);
						_this.activityList = res.data.list[2];
						_this.showActivityList = this.activityList;
						console.log(this.activityList);
					}
				});
			}
		},
		watch:{
			'city':function(){
				this.showActivityList =[];
				this.selectExampleList();
			}
		}
	}
</script>

<style lang="scss">
	
	@font-face {
	        font-family: 'iconfont1';
	        src: url('/static/details/fonts/taobao_global.ttf')
	    }
	.test {
		        font-family: iconfont1;
		    }
	.address_select {
			padding-left: 76upx;
			font-size: 32upx;
			display: flex;
			align-items: center;
			color: #333333;
			background-image: url('/static/icon_location.png');
			background-position: 30upx center;
			background-repeat: no-repeat;
			background-size: auto 90%;
		}
	.uni-loadmore{
		height:40upx;
		line-height:40upx;
		text-align:center;
		padding-bottom:10upx;
	}
	.navTitle{
		width: 100%;
		position: fixed;
		z-index: 20;
		}
		.searchInput{
			position: fixed;
			z-index: 20;
			padding: 0px;
			width: 200px;
			background-color: rgba(181,181,181,0.0);
		}
	.swiper {
		width: 750rpx;
		height: 400rpx;
	
		image {
			width: 100%;
			height: 400rpx;
		}
	}
	.header_float{
		width: 100%;
		height: 64upx;
		 background-color: #2d2d2d;
		margin-right: 111px;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		
		view{
			 color: white;
			 line-height: 64upx;
			 width: 100px;
			 font-size: 16px;
		}
	}
	
	.example-info{
		float: left;
		position: relative;
		z-index: 10;
		display: flex;
		flex-direction: column;
		align-items: center;
		background:#ffffff;
		width: 100%;
		
		view{
			margin-top: 5px;
			width: 100%;
			text-align: center;
		}
	}
</style>
